<template>
  <div>
    <div class="image-reader" :style="{
            'backgroundImage': `url(${value.dataUrl})`,
            'backgroundPosition': 'center center',
            'backgroundRepeat': 'no-repeat',
            'backgroundSize': 'cover'
            }">
      <div class="add-image-btn" v-show="!value.dataUrl">
        <md-icon name="camera" size="md" color="#CCC"></md-icon>
        <p>添加图片</p>
      </div>
      <md-image-reader name="reader" @select="onReaderSelect" @complete="onReaderComplete" @error="onReaderError">
      </md-image-reader>
      <md-tag class="image-reader-item-del" v-show="value.dataUrl" size="small" shape="quarter" fill-color="#111A34"
        type="fill" font-color="#fff" @click.native="onDeleteImage()">
        <md-icon name="close"></md-icon>
      </md-tag>
    </div>
    <div class="image-cropper" v-if="iscCropperShow">
      <vueCropper ref="cropper" :img="pendingImgUrl" :outputSize="outputSize" :outputType="outputType" :autoCrop="true"
        :autoCropWidth="outputWidth" :autoCropHeight="outputHeight" :fixed="fixed"
        :fixedNumber="[outputWidth,outputHeight]" :fixedBox="fixedBox" :canMove="canMove" :canMoveBox="canMoveBox"
        :centerBox="centerBox" :canScale="true">
      </vueCropper>
      <p class="optionsBtn">
        <md-icon name="arrow-left" size="md" @click="rotateLeft()"></md-icon>
        <md-button type="default" size="small" inline @click="onDeleteImage()">取消</md-button>
        <md-button type="default" size="small" @click="getCropData()" inline>确定</md-button>
        <md-icon name="arrow-right" size="md" @click="rotateRight()"></md-icon>
      </p>
    </div>
  </div>
</template>
<script>
  import {
    ImageReader,
    Toast,
    Icon,
    Tag,
    Button
  } from 'mand-mobile'
  import {
    VueCropper
  } from 'vue-cropper'
  export default {
    name: 'image-cropper',
    components: {
      [ImageReader.name]: ImageReader,
      [Icon.name]: Icon,
      [Tag.name]: Tag,
      [Button.name]: Button,
      VueCropper,
    },
    props: {
      outputSize: { //生成图片质量
        type: Number,
        default: () => {
          return 1
        }
      },
      outputType: { //输出图片格式
        type: String,
        default: () => {
          return 'jpeg'
        }
      },
      outputWidth: { //截图框宽
        type: Number,
        default: () => {
          return 100
        }
      },
      outputHeight: { //截图框宽
        type: Number,
        default: () => {
          return 100
        }
      },
      fixed: { //是否固定宽高比
        type: Boolean,
        default: () => {
          return true
        }
      },
      fixedBox: { //是否固定截图框大小
        type: Boolean,
        default: () => {
          return false
        }
      },
      canMoveBox: { //截图框是否可以移动
        type: Boolean,
        default: () => {
          return true
        }
      },
      canMove: { //图片是否可以移动
        type: Boolean,
        default: () => {
          return true
        }
      },
      centerBox: { //截图框是否被限制在图片内
        type: Boolean,
        default: () => {
          return false
        }
      },
      canScale: { //图片是否允许PC端滚轮缩放
        type: Boolean,
        default: () => {
          return false
        }
      },
      getCropDataBefore: { //生成截图之前
        type: Function,
        default: () => {
          return function () {}
        }
      },
      getCropDataAfter: { //生成截图之后
        type: Function,
        default: () => {
          return function () {}
        }
      }
    },
    data() {
      return {
        iscCropperShow: false,
        pendingImgUrl: null, //待处理的图片base64
        pendingImgFile: null, //待处理的图片文件
        value: {
          dataUrl: null,
          blob: null,
          file: null,
          name: null
        }, //处理过的图片
      }
    },
    created() {

    },
    methods: {
      onReaderSelect() {
        Toast.loading('图片读取中...')
      },
      onReaderComplete(name, {
        dataUrl,
        file
      }) {
        Toast.hide()
        this.iscCropperShow = true
        this.pendingImgUrl = dataUrl
        this.pendingImgFile = file
      },
      onReaderError(name, {
        msg
      }) {
        Toast.failed(msg)
      },
      onDeleteImage() {
        this.pendingImgUrl = null
        this.value = {
          dataUrl: null,
          blob: null,
          file: null,
          name: null
        }
        this.iscCropperShow = false
      },
      getCropData() {
        let _this = this
        _this.getCropDataBefore()
        _this.$refs.cropper.getCropData((data) => {
          _this.$set(_this.value, 'dataUrl', data)
          _this.$refs.cropper.getCropBlob((blob) => {
            _this.$set(_this.value, 'blob', blob)
            let file = new window.File([blob], _this.pendingImgFile.name, {
              type: blob.type
            })
            _this.$set(_this.value, 'file', file)
            _this.$set(_this.value, 'name', 'reader')
            _this.iscCropperShow = false
            _this.$emit('input', _this.value)
            _this.getCropDataAfter()
          })
        })
      },
      rotateRight() {
        this.$refs.cropper.rotateRight()
      },
      rotateLeft() {
        this.$refs.cropper.rotateLeft()
      }
    },
  }
</script>
<style lang="less" scoped>
  .image-reader {
    width: 150px;
    height: 150px;
    position: relative;
    border: 1px solid #cfcfcf;

    .md-icon-close {
      font-size: 24px
    }

    .add-image-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      transform: translate(-50%, -50%);

      p {
        font-size: 22px;
        color: #CCC;
        text-align: center;
        padding: 0;
        margin: 15px 0 0 0;
      }

      .md-icon-camera {
        display: block;
        margin: auto;
        font-size: 30px;
        color: #CCC;
        text-align: center;
      }
    }

    .image-reader-item-del {
      position: absolute;
      right: 0;
      top: 0;
    }

    .md-image-reader {
      width: 100%;
      height: 100%;
      position: unset;
    }
  }

  .image-cropper {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;

    .optionsBtn {
      position: absolute;
      bottom: 100px;
      width: 100%;
      display: flex;
      justify-content: space-around;

      .md-button::after {
        content: unset;
      }

      .md-button {
        line-height: 68px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.43);
        display: inline-block;
        font-size: 12px;
        width: 68px;
        height: 68px;
        text-align: center;
        box-shadow: 0px 0px 80px #313131;
        color: #fff;
        font-weight: bold;
        padding: 0;
        margin: 0;
      }

      .md-icon {
        line-height: 64px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.43);
        display: inline-block;
        width: 64px;
        height: 64px;
        text-align: center;
        box-shadow: 0px 0px 80px #313131;
        color: #fff;
        font-weight: bold;
        margin: 2px;
      }
    }
  }
</style>